<template>
  <Modal v-model:visible="showModal" title="电力概况" width="1500px">
    <div class="flex flex-col w-full">
      <a-tabs v-model:activeKey="activeKey" size="small">
        <a-tab-pane key="1" tab="总体情况"></a-tab-pane>
        <a-tab-pane key="2" tab="商业售电排名"></a-tab-pane>
        <a-tab-pane key="3" tab="居民用电情况"></a-tab-pane>
        <a-tab-pane key="4" tab="商业用电情况"></a-tab-pane>
        <a-tab-pane key="5" tab="农排用电情况"></a-tab-pane>
        <a-tab-pane key="6" tab="工业用电情况"></a-tab-pane>
      </a-tabs>

      <div class="flex flex-row items-center mb-1">
        <a-select
          v-model:value="searchParams.year"
          :options="utils.genSelectOptions('year')"
          @change="loadAllData"
        ></a-select>
      </div>

      <div v-show="activeKey === '1'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <!--          <vxe-column field="year" title="年份" width="80">
            <template #default="{ row }"> {{ row.year }}年 </template>
          </vxe-column>

          <vxe-column field="residentNum" title="居民用户数" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.residentNum }}户 </template>
          </vxe-column>
          <vxe-column field="businessNum" title="商业用户数" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.businessNum }}户 </template>
          </vxe-column>
          <vxe-column field="industryNum" title="工业用户数" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.industryNum }}户 </template>
          </vxe-column>
          <vxe-column field="agriculturalDrainageNum" title="农排用户数" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.agriculturalDrainageNum }}户 </template>
          </vxe-column>-->
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column
            field="purchaseElectricityTotal"
            title="购电总量（kWh）"
            minWidth="140"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.purchaseElectricityTotal.toFixed(2) }}
            </template>
          </vxe-column>
          <vxe-column
            field="powerSupplyTotal"
            title="供电总量（kWh）"
            minWidth="140"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.powerSupplyTotal.toFixed(2) }}
            </template>
          </vxe-column>
          <vxe-column
            field="sellingElectricityTotal"
            title="售电总量（kWh）"
            minWidth="140"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.sellingElectricityTotal.toFixed(2) }}
            </template>
          </vxe-column>

          <vxe-column
            field="sellingElectricityTotalTb"
            title="售电总量同比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{
                row.sellingElectricityTotalTb ? row.sellingElectricityTotalTb.toFixed(2) + '%' : '/'
              }}
            </template>
          </vxe-column>
          <vxe-column
            field="sellingElectricityTotalHb"
            title="售电总量环比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{
                row.sellingElectricityTotalHb ? row.sellingElectricityTotalHb.toFixed(2) + '%' : '/'
              }}
            </template>
          </vxe-column>
          <!--          <vxe-column field="electricityUsageTotal" title="用电总量（kWh）" minWidth="140" :sortable="true">
            <template #default="{ row }">
              {{ (row.electricityUsageTotal).toFixed(3) }}万
            </template>
          </vxe-column>-->
        </vxe-table>
      </div>

      <div v-if="activeKey === '2'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData2"
          class="custom-vxe-table"
        >
          <vxe-column type="seq" title="序号" width="50"> </vxe-column>
          <vxe-column field="deptName" title="单位名称" minWidth="150" :sortable="true">
            <template #default="{ row }"> {{ row.deptName }} </template>
          </vxe-column>
          <vxe-column
            field="yearElectricitySales"
            title="售电量(kWh)"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ utils.formatToWan(row.yearElectricitySales) }}
            </template>
          </vxe-column>
          <vxe-column field="change" title="较上年" minWidth="100" :sortable="true">
            <template #default="{ row }">
              <span :class="row.change >= 0 ? 'text-green-500' : 'text-red-500'">
                {{ row.change >= 0 ? '+' : '' }}{{ row.change }}%
              </span>
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <div v-if="activeKey === '3'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="residentNum" title="居民用户数(户)" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.residentNum || 0 }} </template>
          </vxe-column>
          <vxe-column
            field="jmElectricityTotal"
            title="居民售电量(kWh)"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ utils.formatToWan(row.jmElectricityTotal) }}
            </template>
          </vxe-column>
          <vxe-column
            field="jmElectricityTotalTb"
            title="居民售电量同比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.jmElectricityTotalTb ? row.jmElectricityTotalTb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
          <vxe-column
            field="jmElectricityTotalHb"
            title="居民售电量环比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.jmElectricityTotalHb ? row.jmElectricityTotalHb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <div v-if="activeKey === '5'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column
            field="agriculturalDrainageNum"
            title="农排用户数(户)"
            minWidth="100"
            :sortable="true"
          >
            <template #default="{ row }"> {{ row.agriculturalDrainageNum || 0 }} </template>
          </vxe-column>
          <vxe-column
            field="nyElectricityTotal"
            title="农排售电量(kWh)"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ utils.formatToWan(row.nyElectricityTotal) || 0 }}
            </template>
          </vxe-column>
          <vxe-column
            field="nyElectricityTotalTb"
            title="农排售电量同比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.nyElectricityTotalTb ? row.nyElectricityTotalTb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
          <vxe-column
            field="nyElectricityTotalHb"
            title="农排售电量环比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.nyElectricityTotalHb ? row.nyElectricityTotalHb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div v-if="activeKey === '4'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="businessNum" title="商业用户数(户)" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.businessNum || 0 }} </template>
          </vxe-column>
          <vxe-column
            field="syElectricityTotal"
            title="商业售电量(kWh)"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ utils.formatToWan(row.syElectricityTotal) || 0 }}
            </template>
          </vxe-column>
          <vxe-column
            field="syElectricityTotalTb"
            title="商业售电量同比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.syElectricityTotalTb ? row.syElectricityTotalTb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
          <vxe-column
            field="syElectricityTotalHb"
            title="商业售电量环比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.syElectricityTotalHb ? row.syElectricityTotalHb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div v-if="activeKey === '6'" class="">
        <vxe-table
          :loading="true"
          v-bind="customTableStyle"
          :data="tableData"
          class="custom-vxe-table"
        >
          <vxe-column field="month" title="月份" width="80" :sortable="true">
            <template #default="{ row }"> {{ row.month }}月 </template>
          </vxe-column>
          <vxe-column field="industryNum" title="工业用户数(户)" minWidth="100" :sortable="true">
            <template #default="{ row }"> {{ row.industryNum || 0 }} </template>
          </vxe-column>
          <vxe-column
            field="gyElectricityTotal"
            title="工业售电量(kWh)"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ utils.formatToWan(row.gyElectricityTotal) || 0 }}
            </template>
          </vxe-column>
          <vxe-column
            field="gyElectricityTotalTb"
            title="工业售电量同比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.gyElectricityTotalTb ? row.gyElectricityTotalTb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
          <vxe-column
            field="gyElectricityTotalHb"
            title="工业售电量环比增幅"
            minWidth="120"
            :sortable="true"
          >
            <template #default="{ row }">
              {{ row.gyElectricityTotalHb ? row.gyElectricityTotalHb.toFixed(2) + '%' : '/' }}
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Modal from '@/components/modal.vue'
import { Apis } from '@/api'
import { message } from 'ant-design-vue'
import * as utils from '../../utils'

const isLoading = ref(false)

const showModal = ref(false)

const activeKey = ref('1')

const searchParams = ref({
  year: '',
  month: '',
})

const tableData = ref<any[]>([])
const tableData2 = ref<any[]>([])
// 统一管理表格样式
const customTableStyle = {
  ...utils.customTableStyle,
  footerMethod: ({ columns, data }) => {
    const footerData = [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计'
        }
        if (
          [
            'purchaseElectricityTotal',
            'powerSupplyTotal',
            'sellingElectricityTotal',
            'electricityUsageTotal',
          ].includes(column.field)
        ) {
          return utils.sumNum(data, column.field).toFixed(3) + '万'
        }

        return ''
      }),
    ]
    return footerData
  },
}

function loadAllData() {
  loadData()
  loadData2()
}

function loadData() {
  isLoading.value = true
  Apis.szbt.powerSurvey
    .get_list({
      params: {
        year: searchParams.value.year,
        pageNum: 1,
        pageSize: 20,
      },
    })
    .then((res) => {
      tableData.value = (res.rows || [])
        .filter((item) => item.year == searchParams.value.year)
        .sort((a: any, b: any) => {
          // 先按年份倒序
          if (b.month !== a.month) {
            return a.month - b.month
          }
        })
        .map((item: any, index: number) => {
          item.index = index + 1
          return item
        })
    })
    .catch((err) => {
      message.error('获取数据失败')
    })
    .finally(() => {
      isLoading.value = false
    })
}

function loadData2() {
  isLoading.value = true
  Apis.szbt.powerSurvey
    .get_getChartData({
      params: {
        year: searchParams.value.year,
        month: 12,
      },
    })
    .then((res) => {
      const arr = (res.topMap || []).sort(
        (a: any, b: any) => b.yearElectricitySales - a.yearElectricitySales,
      )

      tableData2.value = arr.map((item: any) => ({
        ...item,
        change: item.qnYearElectricitySales
          ? (
              ((item.yearElectricitySales || 0 - item.qnYearElectricitySales) /
                item.qnYearElectricitySales) *
              100
            ).toFixed(2)
          : 0,
      }))
    })
    .catch((err) => {})
    .finally(() => {
      isLoading.value = false
    })
}

defineExpose({
  setData: (data: any) => {
    const { params } = data
    searchParams.value = params
    // tableData.value = data;
  },
  open: () => {
    showModal.value = true
    loadAllData()
  },
})
</script>

<style lang="scss" src="@/styles/custom-vxe-table.scss"></style>
